<template>
  <div class="page-cont">
    <van-nav-bar
      title="移动记录"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <scroll-list
      v-if="!loading"
      v-model="list"
      @onLoad="onLoad"
    >
      <track-item
        v-for="(item, i) in list"
        :key="i"
        :cars="carList"
        :data="item"
      />
    </scroll-list>
    <div class="btn">
      <van-button
        type="info"
        block
        @click="append"
      >
        新增记录
      </van-button>
    </div>
  </div>
</template>

<script>
import ScrollList from '@/components/ScrollList/index.vue'
import TrackItem from './components/TrackItem.vue'

export default {
  name: "CarTrackPage",
  components: {
    TrackItem,
    ScrollList
  },
  data() {
    return {
      loading: true,
      carList: [],
      list: [],
    };
  },
  created() {
    this.getCarList()
  },
  methods: {
    async getCarList() {
      let data = await this.api.GET_CAR_LIST({pageNo: 1, pageSize: 100000});
      this.carList.push(...data.list)
      this.loading = false
    },
    async onLoad(page, done) {
      let res = await this.api.GET_CAR_TRACK_LIST({pageNo: page, pageSize: 10})
      this.list.push(...res.list)

      done(res.pageNo === res.totalPage)
    },
    append() {
      this.$router.push('/cartrack/append')
    }
  }
};
</script>

<style lang="scss" scoped>
@import "./style.scss";
</style>
